<!-- 引入图片上传文件开始-->
<link href="STATIC_PATH/plugins/webuploader/webuploader.css" rel="stylesheet">
<script type="text/javascript" src="STATIC_PATH/plugins/webuploader/webuploader.js"></script>
<style>
    .webuploader-pick {
        padding: 5px 15px;
    }

    .cancel {
        width: 24px;
        height: 24px;
        display: inline;
        float: right;
        text-indent: -9999px;
        overflow: hidden;
        background: url("STATIC_PATH/assets/images/icons.png") no-repeat -47px 0px;
        margin: 5px 1px 1px;
        cursor: pointer;
    }
</style>
<div class="control-group">
    <label  class="control-label">上传图片：</label>
    <div id="uploader-demo" class="controls">
        <div id="fileList" class="uploader-list">
            {present name="covers"}
            {volist name="covers" id="vo"}
                 <div id="WU_FILE_{$key}0" class="file-item thumbnail upload-state-done">
                    <img src="{$vo.url}" style="width:110px;height: 110px;"/>
                    <div class="info"><span class="cancel" onclick='removefile("WU_FILE_{$key}0")'>删除</span></div>
                    <input type="hidden" value="{$vo.cover}" name="cover[]">
                </div>
            {/volist}
            {/present}
        </div>
        <div id="filePicker">点击上传</div>
    </div>
    <script>
        jQuery(function () {
            var $ = jQuery,
                    $list = $('#fileList'),
                    // 优化retina, 在retina下这个值是2
                    ratio = window.devicePixelRatio || 1,

                    // 缩略图大小
                    thumbnailWidth = 100 * ratio,
                    thumbnailHeight = 100 * ratio,

                    // Web Uploader实例
                    uploader;

            // 初始化Web Uploader
            uploader = WebUploader.create({

                // 自动上传。
                auto: true,

                // swf文件路径
                swf: './public/static/plugins/webuploader/Uploader.swf',

                // 文件接收服务端。
                server: '/admin/uploader/upload',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                duplicate :true,
                accept: {
                    title: 'Images',
                    extensions: 'jpg,jpeg,png',
                    mimeTypes: 'image/jpg,image/jpeg,image/png'   //修改这行
                }
            });

            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                                '<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '<div class="info" ><span class="cancel" onclick="removefile(\'' +file.id+ '\')">删除</span></div>' +
                                '</div>'
                        ),
                        $img = $li.find('img');
                console.log($li);
                $list.append($li);

                // 创建缩略图
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id), $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
                }
                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file,response) {
                $('#' + file.id).addClass('upload-state-done');
                var n = '<input type="hidden" value="'+ response.id +'" name="cover[]">';
                $('#' + file.id).append(n);

            });

            // 文件上传失败，现实上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                        $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });
        });
        function removefile(id) {
            var cover = $('#'+id+'').find('input').val();
            var url = "/admin/uploader/removefile.html";
            //询问框
            layer.confirm('是否删除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.post(url, {cover:cover}, function (a) {
                    //弹出提示消息
                    if (a.status) {
                        layer.msg(a.info, {icon: 1})
                        $('#'+id+'').remove();
                    } else {
                        layer.msg(a.info, {icon: 2})
                    }
                });
            }, function(){
                layer.close();
            });
        };
    </script>
</div>
<!-- 引入图片上传文件结束-->
